<script>
export default {
  props: {
    msg: {
      default: 'Web component',
      type: String,
      required: true
    }
  },
  methods: {
    handleClick() {
      this.$emit('myEvent', { detail: { msg: this.msg } })
    }
  }
}
</script>

<template>
  <div>
    <h1 class="green">Hello, {{ msg }}</h1>
    <button @click="handleClick">发送事件</button>
    <slot></slot>
  </div>
</template>

<style scoped>
h1 {
  color: blueviolet;
}
</style>
